<template>
    <div class="Agency" :style="AgencyS">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="Agency"></i>
            <span>申请代理</span>
            <i class="iconfont iconzuojiantou" style="color: rgba(0,0,0,0);"></i>
        </div>
        <div class="Agency-center">
            <div class="AgencyCbox">
                <div class="AgencyMargin">
                    <P>提交表单等待联系，或直接拨打电话：13145658502</P>
                    <div class="message">
                        <span>姓名</span>
                         <input type="text" placeholder="请输入你的名字" v-model="userName">
                    </div>
                    <div class="message">
                        <span>联系电话</span>
                         <input type="tel" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入你的电话号码" v-model="phoneNum" >
                    </div>
                    <div class="agency">
                        <span>想要代理的区域</span>
                        <input type="text" placeholder="请输入您想要代理的区域" v-model="area">
                    </div>
                    <div class="box-buttom">
                        <button @click="applicationAgent">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<<script>
import  {Toast} from 'vant';
export default {
    data() {
        return {
            AgencyS:{
                height: "100vh",
                backgroundSize: "100% 100vh",
            },
            AgencyH:"",
            userName:"",
            phoneNum:"",
            area:''
        }
    },
    mounted() {
        //监听浏览器返回事件
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
        //监听手机屏幕的高度
        this.AgencyH = window.screen.height 
        window.onresize = ()=>{ 
            var Height = document.documentElement.clientHeight || document.body.clientHeight
            var SS = Height*2/100
            if(SS < 9.6){
                var HH = String(this.AgencyH*2/100);
                this.AgencyS.height = HH+"rem";
                this.AgencyS.backgroundSize = "100%"+ " " + HH+"rem";
            }
            else{
                this.AgencyS.height = "100vh";
                this.AgencyS.backgroundSize = "100% 100vh";
            }
        }  
    },
    destroyed() {
        // 销毁监听浏览器事件
        window.removeEventListener('popstate', this.goBack, false);
    },
    methods: {
        Agency(){
            this.$router.push("/Mymi")
        },
        goBack(){
            this.$router.push("/Mymi");
        },
        //申请成为代理商
        applicationAgent () {
              var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
            if(this.userName==''){
                Toast("用户名不能为空")
                return false;
            }else if(this.phoneNum==''){
                Toast("电话不能为空")
                return false;
            }else if(!myreg.test(this.phoneNum)){
                Toast("电话格式不对")
                return false;
            }
            else if(this.area==''){
                Toast("地区不能为空")
                return false;
            }
            this.$axios.post("/cct/agency/add",{
                applyForName:this.userName,
                applyForPhone:this.phoneNum,
                applyAgencyTerritory:this.area
            }).then(res =>{
                console.log("提交申请代理商",res)
                if(res.data.code==0){
                    Toast(res.data.msg);
                    this.$router.push('/Mymi');
                }else{
                     Toast(res.data.msg);
                }
            })
        }

    },
}
</script>
<style lang="less" scoped>
.Agency{
    width: 100%;
    height: 100vh;
    background-color: #f8f8f8;
    background-image: url("../assets/invite/Agency.png");
    // background-size: 100% 100vh;
    font-size: 0;
    .title{
        width: 100%;
        font-size: 0.36rem;
        color:#FFFFFF;
        height: 1.25rem;
        line-height: 1.25rem;
        display: flex;
        justify-content: space-between;
        padding: 0 0.2rem;
        box-sizing: border-box;
    }
    .Agency-center{
        width:100%;
        height:8.5rem;
        margin-top:22vh;
        .AgencyCbox{
            width:6.9rem;
            height:8.5rem;
            background-color:#FFFFFF;
            margin: 0 auto;
            border-radius:0.16rem;
            .AgencyMargin{
                width:6.42rem;
                height:8.5rem;
                margin: 0 auto;
                border: 0.1px solid #FFFFFF;
                p{
                    width:6.42rem;
                    height:0.63rem;
                    background-color:rgba(173,234,221,1);
                    color:#38A83F;
                    font-size: 0.24rem;
                    line-height:0.63rem;
                    text-align: center;
                    margin-top:4vh;
                }
                .message{
                    width:6.42rem;
                    height:0.7rem;
                    margin-top:3vh;
                    line-height:0.7rem;
                    display:flex;
                    border-bottom:0.01rem solid #F8F8F8;
                    span{
                        font-size:0.26rem;
                        font-family:"PingFang-SC-Medium";
                        font-weight: bold;
                        color:#333333;
                        vertical-align:top;
                        display:block;
                        width:2rem;
                        height:0.7rem;
                    }
                    input{
                        font-size:0.26rem;
                        color:#999999;
                        font-family:"PingFang-SC-Medium";
                        font-weight: Medium;
                    }
                    button{
                        font-size:0.36rem;
                        color:#FFFFFF;
                        background-color:#38A83F;
                        width:4.9rem;
                        height:0.8rem;
                        border-radius:0.1rem;
                        margin: 1rem auto;

                    }
                }
                .agency{
                    width:6.42rem;
                    height:0.7rem;
                    margin-top:3vh;
                    line-height:0.7rem;
                    span{
                        font-size:0.26rem;
                        font-family:"PingFang-SC-Medium";
                        font-weight: bold;
                        color:#333333;
                        vertical-align:top;
                        display:block;
                        // width:2rem;
                        height:0.7rem;
                    }
                    input{
                        display:block;
                        width:6.42rem;
                        height:0.7rem;
                        font-size:0.26rem;
                        color:#999999;
                        font-family:"PingFang-SC-Medium";
                        font-weight: Medium;
                        background-color:rgba(173,234,221,1);
                        padding-left:0.2rem;
                    }
                }
                .box-buttom{
                    width:6.42rem;
                    height:0.8rem;
                    margin-top:14vh;
                    line-height:0.8rem;
                    border-bottom:0.01rem solid #FFFFFF;
                    button{
                        font-size:0.36rem;
                        color:#FFFFFF;
                        background-color:#38A83F;
                        width:4.9rem;
                        height:0.8rem;
                        border-radius:0.1rem;
                        margin-left: 0.76rem;

                    }
                }
            }
        }
    }
}
</style>